Figure 4

Testing our App

If you test your app now, you will be able to see your todos when you log in.

Formatting the Date

Before we go on to the next chapter, our current date is in timestamp format e.g. 2021-05-10T00:08:50.082Z. Let’s

format the todo date(s) into a presentable manner. We will be using a library called moment js, a lightweight

JavaScript library for parsing, validating and formatting dates.

In Terminal, in your ‘frontend’ project directory, install moment js with:

Execute in Terminal

npm i moment --save

In todos-list.js, import moment with:

Modify Bold Code

…

import Container from 'react-bootstrap/Container';

import Button from 'react-bootstrap/Button';

import Alert from 'react-bootstrap/Alert';

import moment from 'moment';

const TodosList = props => {

…

return (

…

<Card.Text>

Date created: {moment(todo.created).format("Do MMMM YYYY")}

</Card.Text>

…

And when you run your app, the todo dates should be nicely formatted (fig. 5).

Figure 5